<template>
  <div class="app-container">
    <el-card style="height: 100%; overflow-y: auto">
      <el-form ref="form" :rules="rulesForm" :model="form" label-width="120px">
        <!-- <el-form-item label="素材类型" prop="topStatus">
          <el-radio-group style="width: 1000px" v-model="form.type">
            <el-radio :label="1">图文</el-radio>
            <el-radio :label="2">音频</el-radio>
            <el-radio :label="3">视频</el-radio>
          </el-radio-group>
        </el-form-item> -->
        <el-form-item label="素材标题：" prop="title">
          <el-input
            maxlength="64"
            show-word-limit
            style="width: 80%"
            v-model="form.title"
          />
          <div
            style="
              margin-left: 20px;
              color: #aaa; 
              line-height: 30px;
              font-size: 14px;
            "
          >
            <div>建议不超过17字</div>
          </div>
        </el-form-item>
        <el-form-item label="副标题：" prop="subTitle">
          <el-input
            maxlength="200"
            type="textarea"
            show-word-limit
            style="width: 80%"
            v-model="form.subTitle"
          />
          <div
            style="
              margin-left: 20px;
              color: #aaa;
              line-height: 30px;
              font-size: 14px;
            "
          >
            <div>建议17字内</div>
          </div>
        </el-form-item>
        <!-- <el-form-item label="素材分类：" prop="categoryId">
          <el-cascader
            style="width: 1000px"
            v-model="form.categoryId"
            :options="cateList"
            :props="props"
            @change="cateChange"
            clearable
          />
        </el-form-item> -->
        <el-form-item label="素材封面：" v-if="form.type == 3" prop="pic">
          <div style="display: flex">
            <single-upload
              @uploadSucces="uploadSucces"
              uploadType="2"
              v-model="form.pic"
              :width="'220px'"
              :height="'140px'"
              :border="'1px solid #ccc'"
            >
              <div
                class=""
                style="line-height: 140px; margin-top: 8px"
                v-if="!form.pic"
              >
                <i
                  style="font-size: 40px; color: #ccc; font-weight: bold"
                  class="el-icon-plus"
                ></i>
              </div>
            </single-upload>

            <div
              style="
                margin-left: 20px;
                color: #aaa;
                line-height: 30px;
                margin-top: 20px;
                font-size: 14px;
              "
            >
              <div>温馨提示</div>
              <div>1、支持jpg、jpeg、png格式的图片文件</div>
              <div>2、尺寸比较建议长宽660*420，大小限制在2M以下</div>
            </div>
          </div>
        </el-form-item>
        <el-form-item
          label="上传视频："
          v-if="form.type == 3  && form.title && form.pic"
          prop="linkUrl"
        >
          <div style="display: flex">
            <uploadVideo
              :cateId="form.vodCategoryId"
              :objData="{
                title: form.title,
                cateId: form.vodCategoryId,
                coverURL: form.pic,
              }"
              v-model="form.linkUrl"
              @editVideoId="editVideoId"
            ></uploadVideo>
            <div
              style="
                margin-left: 20px;
                color: #aaa;
                line-height: 30px;
                margin-top: 20px;
                font-size: 14px;
              "
            >
              <div>温馨提示</div>
              <div>1、支持MP4格式的视频文件</div>
              <div>2，大小限制在1024MB以下</div>
            </div>
          </div>
        </el-form-item>
        <!-- <div
          :style="{ 'margin-top': form.pic ? '0' : '30px' }"
          v-if="form.type == 3"
        >
          <el-form-item label="素材内容：" prop="content">
            <Tinymce ref="tinymce" v-model="form.content" :height="600" />
          </el-form-item>
        </div> -->

        <el-form-item label="备注" prop="note">
          <el-input
            maxlength="200"
            type="textarea"
            show-word-limit
            style="width: 1000px"
            v-model="form.note"
          />
        </el-form-item>
        <el-form-item label="素材排序：">
          <el-input-number v-model="form.sort" :min="0" :max="999" />
        </el-form-item>
        <el-form-item>
          <el-button
            style="width: 100px"
            type="primary"
            @click="onSubmit('form')"
            >保存</el-button
          >
          <el-button style="width: 100px" @click="goBack()">返回</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import uploadVideo from "@/components/uploadVideo/uploadVideo";
import Tinymce from "@/components/Tinymce";
import SingleUpload from "@/components/Upload/uploadOne";
import {} from "@/api/article";
import {
  sourcematerial,
  addThirdMaterial,
  getThirdMaterialDetail,
  editThirdMaterial,
} from "@/api/lesson";
import { handleTree } from "@/utils/auth";
const form = {
  categoryId: "", // 分类ID
  title: "", //标题
  subTitle: "", // 副标题
  pic: "", //封面图
  type: 3, //类型：1->图文；2->音频；3->视频
  videoId: "", //视频ID
  linkUrl: "", //视频链接
  content: "", //内容
  note: "", //备注
  sort: "",
  vodCategoryId: "",
};
export default {
  name: "add",
  components: { SingleUpload, Tinymce, uploadVideo },

  data() {
    return {
      props: {
        emitPath: false,
        label: "name",
        value: "id",
        // checkStrictly: true,
      },
      cateList: [],
      form: Object.assign({}, form),
      rulesForm: {
        title: [
          { required: true, message: "请输入文章标题", trigger: "blur" },
          {
            min: 1,
            max: 64,
            message: "长度在 1 到 64 个字符",
            trigger: "blur",
          },
        ],
        categoryId: [
          { required: true, message: "请选择分类", trigger: "blur" },
        ],

        pic: [{ required: true, message: "请上传封面图", trigger: "blur" }],
        content: [
          { required: true, message: "请输入文章内容", trigger: "blur" },
        ],
        linkUrl: [
          { required: true, message: "请选择关联视频", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getCateList();
    if (this.$route.query.id) {
      this.$route.meta.title = "编辑素材";
      this.getInfo();
    }
  },
  mounted() {},
  methods: {
    uploadSucces() {
      this.$refs.form.validateField("pic");
    },
    goBack() {
      this.$router.go(-1);
    },
    editVideoId(v) {
      this.form.videoId = v;
      setTimeout(() => {
        this.$refs.form.validateField("linkUrl");
      }, 100);
    },
    getInfo() {
      getThirdMaterialDetail(this.$route.query.id).then((res) => {
        this.form = Object.assign({}, res.data);
        this.$refs.tinymce.setContent(this.form.content);
      });
    },

    getCateList() {
      sourcematerial().then((res) => {
        var arr = [];
        res.data.map((item) => {
          if (item.enableStatus == 0) {
            arr.push(item);
          }
        });
        this.cateList = handleTree(arr, "id");
      });
    },
    flattenTree(tree) {
      const result = [];
      tree.forEach((node) => {
        result.push(node);
        if (Array.isArray(node.children)) {
          const children = this.flattenTree(node.children);
          result.push(...children);
        }
      });
      return result;
    },
    cateChange(e) {
      console.log(this.flattenTree(this.cateList));
      this.form.vodCategoryId = this.flattenTree(this.cateList).find(
        (v) => v.id == e
      ).vodCategoryId;
    },
    onSubmit(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          const params = Object.assign({}, this.form);
          if (this.$route.query.id) {
            editThirdMaterial(params).then((res) => {
              if (res.code == 200) {
                this.$message({
                  message: "编辑成功",
                  type: "success",
                });
                setTimeout(() => {
                  this.$router.go(-1);
                }, 1000);
              }
            });
          } else {
            addThirdMaterial(params).then((res) => {
              if (res.code == 200) {
                this.$message({
                  message: "保存成功",
                  type: "success",
                });
                setTimeout(() => {
                  this.$router.go(-1);
                }, 1000);
              }
            });
          }
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.app-container {
  height: calc(100vh - 50px);
  background-color: #f5f5f5;
  position: relative;
}
.image-message {
  height: 96px;
  //display: flex;

  > div {
    &:nth-child(2) {
      //margin-right: 20px;
      //width: 500px;
    }
  }
}
.product-img {
  width: 1000px;
  display: flex;
  flex-wrap: wrap;
  .product-img-box {
    position: relative;
    .i2 {
      position: absolute;
      right: -1px;
      top: -5px;
    }
  }
  .uploadPic {
    width: 96px;
    height: 96px;
    // margin-left: 10px;
    background: #eeeeee;
    border-radius: 8px;
    position: relative;

    .i1 {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }

  img {
    width: 96px;
    height: 96px;
    margin-right: 13px;
  }
}
.imageBg {
  width: 220px;
  height: 140px;
  line-height: 140px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #ddd;
}
.uploadPic1 {
  min-width: 96px;
  height: 96px;
  // margin-left: 10px;
  background: #fff;
  border-radius: 8px;
  position: relative;
  border: 1px solid #eee;

  .i1 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
.uploadPic2 {
  width: 90px;
  height: 90px;

  background: #eeeeee;
  border-radius: 8px;
  position: relative;
  > i {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
/deep/.el-form-item__content {
  display: flex !important;
  flex-direction: row;
  // align-items: center;
}
</style>
